<style scoped>
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }

  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }

  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }

  .rj-cell.max span {
    font-size: 16px;
    padding-right: 20px;
  }

  .rj-cell label {
    color: #333;
    font-size: 14px;
  }

  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }

  .rj-cell.note {
    width: 100%;
  }

  .rj-cell.note label {
    float: left;
  }

  .rj-cell.note span {
    width: 80%;
    display: inline-block;
  }

  .weui-panel {
    background: #eee;
  }

  .weui-panel {
    margin-top: 0;
    text-align: left;
  }

  .attachimg {
    /*width: 100%;*/
  }

  .tit label, .tit span {
    font-size: 16px;
  }

  .tit label {
    padding-right: 20px;
  }

  .weui-panel.weui-panel_access {
    padding-bottom: 10px;
  }

  .weui-panel__bd:not(.base) {
    /*width: 98%;*/
    padding: 0 1% 2px 1%;
  }

  .rj-cont-tit:not(.base) {
    border-radius: 5px;
  }

  .weui-cell {
    background: #fff;
  }

  .weui-cells__title {
    text-align: left;
    background: #eee;
  }

  .oitem {
    padding: 3px;
  }

  #acts span {
    font-size: 14px;
  }

  .weui-label {
    text-align: left;
  }

  .weui-media-box {
    text-align: left;
  }

  .weui-panel {
    background: #eee;
  }

  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }

  .weui-panel {
    margin-top: 0;
    text-align: left;
  }

  .hd .weui-grid.js_grid {
    font-weight: 600;
  }
  .section {
    width: auto;
    margin: 5px;
    border-radius: 5px;
    text-align: left;
    overflow: hidden;
  }
  .itemSection {
    background: #fafafa;
    margin: 3px;
  }
  .itemTit {
    color: #999;
    font-size: 12px;
    margin-left: 15px;
  }
</style>
<template>
  <div class="comon" style="background: #eee;">
    <div
      style="height: 50px; line-height: 50px; background: #fff; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      {{title}}详情
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px"/>
      </a>
    </div>
    <!--    主表信息-->
    <div class="weui-form-preview" style="background: #fff;">
      <div class="weui-form-preview__hd">
        <label class="weui-form-preview__label">编号</label>
        <em class="weui-form-preview__value">{{baseInfo.sellcode}}</em>
      </div>
      <div class="weui-form-preview__bd">
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">项目</label>
          <span class="weui-form-preview__value">{{baseInfo.projName}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">申请人</label>
          <span class="weui-form-preview__value">{{baseInfo.applyname}} {{baseInfo.depname}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">销售组织</label>
          <span class="weui-form-preview__value">{{baseInfo.orgName}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">客户</label>
          <span class="weui-form-preview__value">{{baseInfo.customername}}</span>
          <span v-if="customer != null">{{baseInfo.typename}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">货品类型</label>
          <span class="weui-form-preview__value">{{baseInfo.quitSRTypeName}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">付款方式</label>
          <span class="weui-form-preview__value">{{baseInfo.paytypename}}</span>
        </div>
        <div class="weui-form-preview__item" v-if="flowid == 36 && baseInfo.faretypename">
          <label class="weui-form-preview__label">物流结算</label>
          <span class="weui-form-preview__value">{{baseInfo.faretypename}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">配送方式</label>
          <span class="weui-form-preview__value">{{baseInfo.deliverytypename}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">要求发货日期</label>
          <span class="weui-form-preview__value">{{baseInfo.senddate}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">要求到货日期</label>
          <span class="weui-form-preview__value">{{baseInfo.arrivedate}}</span>
        </div>
<!--        <div class="weui-form-preview__item" v-if="baseInfo.settletype == 1">-->
<!--          <label class="weui-form-preview__label">订单件数</label>-->
<!--          <span class="weui-form-preview__value">{{baseInfo.orderpack}}</span>-->
<!--        </div>-->
<!--        <div class="weui-form-preview__item" v-if="baseInfo.settletype == 1 && baseInfo.handselcount">-->
<!--          <label class="weui-form-preview__label">赠送件数</label>-->
<!--          <span class="weui-form-preview__value">{{baseInfo.handselcount}}</span>-->
<!--        </div>-->
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">订单重量</label>
          <span class="weui-form-preview__value">{{baseInfo.orderweight}} 吨</span>
        </div>
<!--        <div class="weui-form-preview__item" v-if="baseInfo.handselweight">-->
<!--          <label class="weui-form-preview__label">赠送重量</label>-->
<!--          <span class="weui-form-preview__value">{{baseInfo.handselweight}} 吨</span>-->
<!--        </div>-->
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">计价方式</label>
          <span class="weui-form-preview__value">{{baseInfo.settletypename}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">结算币种</label>
          <span class="weui-form-preview__value">{{baseInfo.currencyName}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">状态</label>
          <span class="weui-form-preview__value">{{baseInfo.statusname}}</span>
        </div>
        <div class="weui-form-preview__item" v-if="baseInfo.paytype <= 3">
          <label class="weui-form-preview__label">回款状态</label>
          <span class="weui-form-preview__value">{{baseInfo.moneybackStatusName}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">备注</label>
          <span class="weui-form-preview__value">{{baseInfo.remarks}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">创建时间</label>
          <span class="weui-form-preview__value">{{baseInfo.createtime}}</span>
        </div>
        <div class="weui-form-preview__item" v-if="baseInfo.files && baseInfo.files.length > 0">
          <label class="weui-form-preview__label">附件</label>
          <a v-for="(item, index) in baseInfo.files" :href="item.url">
            <span class="weui-form-preview__value">{{item.imagename}}</span>
          </a>
        </div>
      </div>
    </div>
    <template >
      <div class="weui-panel__hd" style="text-align: left;">收发货信息</div>
      <div class="weui-panel__bd section" style="background: #fff;">
        <div class="rj-cell max">
          <label>库房：</label>
          <span>{{baseInfo.storeroomname}}</span>
          <span v-if="baseInfo.storeOrgName"> - {{baseInfo.storeOrgName ? baseInfo.storeOrgName : ''}}</span>
        </div>
        <div class="rj-cell max">
          <label>发货地址：</label>
          <span>{{baseInfo.deliProvince}} {{baseInfo.deliCity}} {{baseInfo.deliDistrict}} {{baseInfo.deliAddress}}</span>
        </div>
        <div class="rj-cell max">
          <label>发货联系人：</label>
          <span>{{baseInfo.deliContact}}</span>
          <span>{{baseInfo.deliContactNo}}</span>
        </div>
        <div class="rj-cell max">
          <label>收货地址：</label>
          <span>{{baseInfo.arriProvince}} {{baseInfo.arriCity}} {{baseInfo.arriDistrict}} {{baseInfo.arriAddress}}</span>
        </div>
        <div class="rj-cell max">
          <label>收货联系人：</label>
          <span>{{baseInfo.arriContact}}</span>
          <span>{{baseInfo.arriContactNo}}</span>
        </div>
      </div>
    </template>
    <template v-if="wlinfo && wlinfo.transtype == 1">
      <div class="weui-panel__hd" style="text-align: left;">物流信息</div>
      <div class="weui-panel__bd section" style="background: #fff;">
        <div class="rj-cell max">
          <label>承运人：</label>
          <span>{{wlinfo.carcode}}</span>
          <span>{{wlinfo.drivername}}</span>
          <span>{{wlinfo.driverphone}}</span>
        </div>
        <div class="rj-cell max">
          <label>物流公司：</label>
          <span>{{wlinfo.customername}}</span>
        </div>
        <div class="rj-cell max">
          <label>车型：</label>
          <span>{{wlinfo.cartype}}</span>
        </div>
      </div>
    </template>
    <template v-if="wlinfo && wlinfo.transtype == 3">
      <div class="weui-panel__hd" style="text-align: left;">物流信息</div>
      <div class="weui-panel__bd section" style="background: #fff;">
        <div class="rj-cell max">
          <label>快递公司：</label>
          <span>{{wlinfo.customername}}</span>
        </div>
      </div>
    </template>
    <div class="weui-panel__hd" style="text-align: left;">货品信息</div>
    <div class="weui-panel__bd section" style="background: #fff;" v-for="(item, index) in allItems" :key="item.guid">
<!--      <p class="itemTit">产品明细 {{index+1}}</p>-->
      <div class="rj-cell max">
        <label>产品：</label>
        <span>{{item.productname}}</span>
        <span>{{item.spname}}</span>
      </div>
      <div v-for="(product, index) in item.sellitems" :key="product.guid" style="border-top: 1px solid #ccc;" >
        <div class="itemSection">
          <span style="display: inline-block;width: 70%;color: #333;">{{product.productname}} {{product.spname}}</span>
          <span>X</span>
<!--          <input class="weui-input outcount" style="display: inline-block;width: 8%;" type="number" readonly :value="item.orderpack/product.orderpack" >-->
          <input class="weui-input outcount" style="display: inline-block;width: 8%;" type="number" readonly :value="product.weight/item.orderpack" >
          <span>{{product.unit}}</span>
        </div>
      </div>
<!--      <div class="rj-cell max" v-if="baseInfo.settletype == 1">-->
<!--        <label>订单件数：</label>-->
<!--        <span>{{attachUnit(item.orderpack, item.unit)}}</span>-->
<!--      </div>-->
<!--      <div class="rj-cell max" v-if="baseInfo.settletype == 1 && item.handselcount">-->
<!--        <label>赠送件数：</label>-->
<!--        <span>{{attachUnit(item.handselcount, item.unit)}}</span>-->
<!--      </div>-->
      <div class="rj-cell max">
        <label>订单数量：</label>
        <span>{{attachUnit(item.flag == 2 ? item.orderpack : item.weight, item.unit)}}</span>
      </div>
      <div class="rj-cell max" v-show="showPrice">
        <label>单价：</label>
        <span>{{item.price}} {{packUnit(item.unit, baseInfo.currency)}}</span>
      </div>
      <div class="rj-cell max" v-if="item.handselcount">
        <label>赠送数量：</label>
        <span>{{attachUnit(item.handselcount, item.unit)}}</span>
      </div>
      <div v-if="item.unloadweight" class="rj-cell max">
        <label>到货数量：</label>
        <span>{{item.unloadweight}} {{item.unit}}</span>
      </div>
      <div class="rj-cell">
        <label>备注信息：</label>
        <span>{{item.remark}}</span>
      </div>
    </div>
<!--    <template v-if="baseInfo.status > 70">-->
      <div class="weui-panel__hd" style="text-align: left;">出库信息</div>
      <div class="weui-panel__bd section" style="background: #fff;">
          <div class="itemSection">
            <div class="rj-cell" style="display: block;" v-for="(product, index) in packWhoutProducts">
              <span>{{product.product}} {{product.spename}}</span>
              <span style="float: right;" v-if="product.handsel">{{product.weight ? product.weight : 0}}/{{product.handselweight ? product.handselweight : 0}} {{product.stockunit}}</span>
              <span style="float: right;" v-else>{{product.weight ? product.weight : 0}} {{product.stockunit}}</span>
            </div>
          </div>
      </div>
<!--    </template>-->
    <template v-if="backinfo != ''">
      <div class="weui-panel__hd" style="text-align: left;">退换货信息</div>
      <div class="weui-panel__bd section" style="background: #fff;">
        <div class="rj-cell max">
          <label>退货类型：</label>
          <span>{{backinfo.typename}}</span>
        </div>
        <template v-if="backinfo.type == 1">
          <div class="rj-cell max">
            <label>退款金额：</label>
            <span> {{backinfo.amount}}</span>
            <label>收款人：</label>
            <span> {{backinfo.payee}}</span>
          </div>
          <div class="rj-cell max">
            <label>开户行：</label>
            <span> {{backinfo.bank}}</span>
            <label>收款账号：</label>
            <span> {{backinfo.bankaccount}}</span>
          </div>
        </template>
        <template v-if="backinfo.type == 3">
          <div class="rj-cell max">
            <label>补货金额：</label>
            <span>{{backinfo.amount}}</span>
          </div>
          <div class="rj-cell max">
            <label>收款人：</label>
            <span>{{backinfo.customername}}</span>
          </div>
        </template>
        <div class="rj-cell max" v-if="backinfo.type == 1 || backinfo.type == 3">
          <label>付款方式：</label>
          <span>{{backinfo.paytypename}}</span>
        </div>
        <div class="rj-cell max">
          <label>状态：</label>
          <span>{{backinfo.statusname}}</span>
        </div>
      </div>
    </template>

    <!--    审批记录-->
    <SalesOperationLogs7 :orderid="id" :srguid="baseInfo.srguid" :departid="baseInfo.depguid" :flowid="flowid"></SalesOperationLogs7>
    <!--    </div>-->
    <!--  </div>-->
    <CommentBom v-if="isReady" :flowid="flowid" :nodeid="nodeid" :id="id" :srguid="baseInfo.srguid" :departid="baseInfo.depguid" :model="baseInfo" navgateUrl="/sellform2/SellformList" ></CommentBom>
  </div>
</template>

<script>
  import SalesOperationLogs7 from '../common/SalesOperationLogs7'
  import CommentBom from '@/components/common/CommentBom'

  export default {
    name: 'ViewSellform2',
    data() {
      return {
        flowid: 34,
        openid: localStorage.openid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        userid: localStorage.userId,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        id: '',
        baseInfo: {},
        baseItems: [],
        qaform: [],
        qaFormImg: [],
        orderfiles: [],
        isReady: false,
        wlinfos: [],
        wlinfo: '',
        sellitems: [],
        customer: '',
        hasWeightList: false,
        loadWeightL: {},
        unLoadWeightL: {},
        qaform:[],
        qaFormImg:[],
        orderfiles: [],
        backinfo: '',
        showPrice: false,
        allItems: '',
      }
    },
    components: {
      SalesOperationLogs7,
      CommentBom
    },
    computed: {
      packWhoutProducts: function () {
        return this.baseInfo.whoutform ? this.baseInfo.whoutform.items : [];
      },
      title: function () {
        let tit = '销售订单';
        switch (this.flowid) {
          case '34':
            tit = '电商订单';
            break;
          case '35':
            tit = '样品订单';
            break;
          default:
            tit = '销售订单';
            break;
        }
        return tit;
      }
    },
    created() {
      if (this.$route.query.flowid) this.flowid = this.$route.query.flowid;
      //页面title设置
      document.title = '土豆集-' + this.title;
      window.addEventListener('setItem', () => {
        this.openid = localStorage.getItem('openid');
        this.userid = localStorage.getItem('userId');
      })
    },
    mounted() {
      this.id = this.$route.query.id;
      this.getbaseInfo(this.id);
    //获取是否显示价格权限
      this.getPricePermis();
      //图片浏览器
      $('.weui-panel').on('click', '.uploaderFiles .attachimg', function () {
        var num = $(this).parent().children().not(".exp").length;
        var imgArr = [];
        for (var i = 0; i < num; i++) {
          imgArr.push($(this).parent().find('.attachimg').eq(i).data('img'));
        }
        var pnum = $(this).parent().find('.exp').length;
        var index = pnum > 0 ? $(this).index() - pnum : $(this).index();
        var pb = $.photoBrowser({
          items: imgArr,
          initIndex: index
        });
        pb.open();
      });

    },
    methods: {
      packUnit: function(unit, currency) {
        return unit != undefined && unit != '' ? currency == 2 ? '美元/' + unit : '元/' + unit : '';
      },
      getFiles: function () {
        let that = this;
        this.axios({
          method: 'get',
          url: '/sales/Fileinfo!getFileinfo.action',
          params: {orderid: this.id}
        }).then(response => {
          if (response.data.msg == 'success') {
            this.orderfiles = response.data.files;
          } else {
            //失败时不提示
          }
        });
      },
      getbaseInfo: function (id) {
        this.axios({
          method: 'get',
          url: `/prod-api/bill/sellform//detail`,
          params: {orderid: id}
        }).then(response => {
          if (response.data.code == 200) {
            let data = response.data.data;
            this.baseInfo = data.result || {};
            this.sellitems = this.baseInfo.items;
            this.allItems = this.baseInfo.spitems ? this.baseInfo.spitems.concat(this.baseInfo.items) : this.baseInfo.items;
            if (data.wlinfos && data.wlinfos.length > 0) {
              this.wlinfo = data.wlinfos[0];
            }
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError('系统错误');
          }
          this.isReady = true;
        });
      },
      getPricePermis: function() {
        let that = this;
        this.axios({
          method: 'get',
          url: '/prod-api/flow/flowtemp/showPrice',
          params: {id: this.flowid}
        }).then(response => {
          if (response.data.code == 200) {
                that.showPrice = response.data.msg == 1;
          } else {
            //失败时不提示
          }
        });
      },
      status2Txt: function(param) {
        let res = '';
        switch (param) {
          case 1:
            res = '草稿';
            break;
          case 2:
            res = '内部审批';
            break;
          case 3:
            res = '土豆集审批';
            break;
          case 4:
            res = '待加工';
            break;
          case 5:
            res = '生产加工';
            break;
          case 6:
            res = '待出库';
            break;
          case 7:
            res = '已出库';
            break;
          case 8:
            res = '运输中';
            break;
          case 9:
            res = '已到货';
            break;
          case 10:
            res = '待结算';
            break;
          case 11:
            res = '已回款';
            break;
          case 0:
            res = '已作废';
            break;
        }
        return res;
      }
    }
  }
</script>
